<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css  样式思路：
			 1.通配选择器：微软雅黑，#f5f5f5   浅灰，外边距至0
			 2.#product_card:边框，内边距，外边距，阴影【透明.1】,文字居中
			 3.img：边框倒角，内外边距？【微调】
			 4.h3  颜色，内外边距？【微调】
			 5.p: 字体大小，颜色
			 6.p+span:span,内外边距？【微调】
			 */
			
			
			body {
			    background: #f5f5f5;
			    margin: 0 auto;
			    font-family: 'Microsoft YaHei', sans-serif;
			}
			
			#product_card {
			    border: 1px solid #ccc; 
			    padding: 20px; 
			    margin: 20px; 
			    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			    text-align: center; 
			}
			
			img {
				width="250px
				 height=350px
			    border-radius:200px; 
			    margin: 10px; 
				
			}
			
			h3 {
			    color: #333; 
			    margin: 10px 0; 
			}
			
			p {
			    font-size: 19px; 
			    color: #ff0000; 
			}
			
			p+span {
			    font-size: 14px; 
			    color: #999; 
			    margin: 5px 0; 
			} 
			
			/* span{
				font-size: 14px; 
				color: #999; 
				margin: 5px 0; 
			} */
			div {
			    width: 300px;
			    height: 500px;
			    background: #ffffff;
			    margin: 0 auto; 
			}
		/* 	body{
			
				background: #f5f5f5;
				margin: 0 auto;
				
			
			}
			div{
				width: 300px;
				height: 600px;
				background: #ffffff;
				margin: 0 auto;
				
			}
			
			img{
				margin: 0 auto;
				padding: 10px 15px 20px 25px;
		     border-radius: 5%;
			}
			h3{
			margin: 0 auto;
			padding: 0px 5px 10px 110px;
			}
			p{
				color: red;
				padding: 0px 50px 50px 100px;
				
			}
			span{
				color: black;
				padding: 1000px 10px 100px 100px;
			} */
		</style>
	</head>
	<body>
		<!-- 网页：1.html  结构【原生图分析】 -->
		<div id="product_card">
			<img src="img/su7.jpg" width="250px" height="350px" alt="汽车">
			<h3>小米SU7</h3>
			<p>￥279999.00</p>
			<span>已有10万+评价</span>
		</div>
	</body>
</html>